{strip}
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/reset_font_grid.css"/>
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/innerlayout.css"/>
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/mainlayout.css"/>
<link rel="stylesheet" type="text/css" href="{$siteroot}/templates/default/style/jquery.mCustomScrollbar.css"/>

<script type="text/javascript" src="{$siteroot}/includes/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="{$siteroot}/includes/js/jquery.mCustomScrollbar.js"></script>
{/strip}

{literal}
    <style>
	
.inner_head {
    background: url(../../images/innerhd_undeline.png) no-repeat scroll left bottom transparent;
    color: #19A3DA;
    font: 20px "OpenSansRegular",Arial,Helvetica,sans-serif;
    height: 48px;
    margin-top: 20px;
    padding: 0 0 7px 25px;   
}
.btn {
    background: -moz-linear-gradient(center top , #6BC3E6 0%, #1BA4DA 100%) repeat scroll 0 0 transparent;
    border: 1px solid #4EB0D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 2px 0 #0594CD;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 14px;
    padding: 5px 14px;
    text-align: center;
}
.btn:hover {
    background: -moz-linear-gradient(center top , #1BA4DA 0%, #6BC3E6 100%) repeat scroll 0 0 transparent;
    border: 1px solid #4EB0D7;
    color: #FFFFFF;
}
a.btn {
    background: -moz-linear-gradient(center top , #6BC3E6 0%, #1BA4DA 100%) repeat scroll 0 0 transparent;
    border: 1px solid #4EB0D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 2px 0 #0594CD;
    color: #FFFFFF;
    cursor: pointer;
    display: block;
    font-size: 14px;
    padding: 5px 14px;
    text-align: center;
}
a.btn:hover {
    background: -moz-linear-gradient(center top , #1BA4DA 0%, #6BC3E6 100%) repeat scroll 0 0 transparent;
    border: 1px solid #4EB0D7;
    color: #FFFFFF;
}
.add_testi_wrapper{width:480px; margin-top:20px;}
.add_testi_wrapper dl{width:100%; display:block;}
.add_testi_wrapper dl dt{width:130px; font-weight:bold; text-align:right; float:left;}
.add_testi_wrapper dl dd{width:350px; margin:0px; float:right;}
.error{color:#F00;}

div.message_list{
	display:block;
	width:100%;
	height:310px;	
	overflow:hidden;
}
div.messages_flow{
	margin:10px;	
}
div.message_element{
	margin: 10px 0;	
}

.mess_text{
	width:100%;
	margin-bottom:10px;
	padding-bottom:10px;
}

.yourmess .mess_body{
	border:1px solid #ccc;
	background:#FFFDEE;
	width:400px;
	padding:5px;
	display:block;
}

.yourmess .mess_date{
	width:410px;
	text-align:right;
	padding:5px 0 0 5px;
	display:block;
}

.clientmess .mess_body{
	border:1px solid #ccc;
	background:#FFF;
	width:400px;
	padding:5px;
	float:right;
	display:block;
}

.clientmess .mess_date{
	width:410px;
	text-align:right;
	padding:5px 0 0 5px;
	float:right;
	display:block;
}
.mess_item{
	clear:both;
	position:relative;
	display:block;
}
.clear{ clear:both;}
.mess_user_supplier{
	width:410px;
	float:left;
	display:block;	
	color: #19A3DA;
	font: 20px "OpenSansRegular",Arial,Helvetica,sans-serif;
}
.mess_user_client{
	width:410px;
	float:right;
	display:block;	
	color: #19A3DA;
	font: 20px "OpenSansRegular",Arial,Helvetica,sans-serif;
}

</style>

    <script type="text/javascript" language="javascript">
	function checksubmit()
	{
			if($('#message').val()=="")
			{
				alert("Please enter your message");
				return false;	
			}
			if($("#attachment").val())
			{
				var ext = $('#attachment').val().split('.').pop().toLowerCase();
				if($.inArray(ext, ['doc','docx','xls','xlsx','pdf','zip','gif','png','jpg','jpeg']) == -1) {
					alert("Please upload correct file");
					return false;
				}
				return true;
			}
			return true;
	}	
	
		(function($){
			$(window).load(function(){
				$(".message_list").mCustomScrollbar({
					scrollButtons:{
						enable:true
					}
				});
			});
		})(jQuery);
    </script>
    {/literal}
   
<div class="middle_portion" style="background-color:#F4F9FD;">

  <div class="title_box">
    <h4 class="inner_head">Between You and {$jobowner}</h4>
     <div class="clear"></div>     
    </div>                             
    <div class="messages_flow">
    <div class="message_list">
    	{section name=i loop=$messageslist}
    	<div class="mess_item">
        
        
        	{if $messageslist[i].type eq 'supplier'}
            
            	<div class="mess_user_supplier">
                    	<img src="{$siteroot}/templates/default/images/user.png" />{$jobowner} 
                </div>
                 <div class="clear"></div>
                <div class="mess_text yourmess">
                    <div class="mess_body">
                    {$messageslist[i].message}
                    </div>
                    <div class="clear"></div>
                    <div class="mess_date">
                    {$messageslist[i].created}
                    </div>
                    {if $messageslist[i].attachfile}
                    <div class="">
                    	<a href="{$siteroot}/leads/{$messageslist[i].id}/download"><img src="{$siteroot}/templates/default/images/attachment.png" />{$messageslist[i].attachfile}</a>
                    </div>
                    {/if}
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            
            {else}
                <div class="mess_text clientmess">
                	<div class="mess_user_client">
                    	<img src="{$siteroot}/templates/default/images/user.png" /> You
                    </div>
                    
                    <div class="mess_body">
                    {$messageslist[i].message}
                    </div>
                    <div class="clear"></div>
                    <div class="mess_date">
                    {$messageslist[i].created}
                    </div>
                    {if $messageslist[i].attachfile}
                    <div class="">
                    	<a href="{$siteroot}/leads/{$messageslist[i].id}/download"><img src="{$siteroot}/templates/default/images/attachment.png" />{$messageslist[i].attachfile}</a>
                    </div>
                    {/if}

                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
            
            {/if}
        </div>
        {/section}
    </div>	

    <div class="message_form">
    	<h3><strong>Send Message</strong></h3>
    	<form method="post" action="" enctype="multipart/form-data" id="msgform" onsubmit="return checksubmit()">
        	<div class="message_element">
            	<textarea style="width:100%; height:70px;" name="message" id="message"></textarea>
            </div>
            <div class="message_element">
            	<p>Add an attachment (DOC,XLS,PDF,ZIP,PNG,JPG,GIF) (*5Mb)</p>
                <input type="file" name="attachment" id="attachment" />
            </div>
            <div class="message_element" style="text-align:center;">
            	<input type="submit" name="submit" value="Submit"  class="btn" />
            </div>
            <input type="hidden" name="jobid" value="{$jobid}" />
            <input type="hidden" name="trade_id" value="{$trade_id}" />
            <input type="hidden" name="jobowner_id" value="{$jobowner_id}" />
        </form>
    </div>	
	
	</div>
  <div class="clear"></div>
</div>
